<template>
  <view>
    <u-form labelPosition="left" :model="form"  ref="form">
      <u-form-item
          label="被告姓名"
          prop="defendantName"
          borderBottom
          ref="item1"
          labelWidth="65"
      >
        <u-input
            v-model="form.defendantName"
            placeholder="请输入被告姓名"
            border="none"
        ></u-input>
      </u-form-item>
      <u-form-item
          label="被告性别"
          prop="defendantSex"
          borderBottom
          @click="showDefendantSex = true; "
          ref="item1"
          labelWidth="65"
      >
        <u-input
            v-model="form.defendantSex"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择被告性别"
            border="none"
        ></u-input>
        <u-icon
            slot="right"
            name="arrow-right"
        ></u-icon>
      </u-form-item>
      <u-form-item
          label="被告身份证号"
          prop="defendantID"
          borderBottom
          ref="item1"
          labelWidth="95"
      >
        <u-input
            v-model="form.defendantID"
            placeholder="请输入原告身份证号"
            border="none"
            type="number"
            maxlength="18"
        ></u-input>
      </u-form-item>
      <u-form-item
          label="被告联系电话"
          prop="defendantPhone"
          borderBottom
          ref="item1"
          labelWidth="95"
      >
        <u-input
            v-model="form.defendantPhone"
            placeholder="请输入被告联系电话"
            border="none"
            type="number"
            maxlength="11"
        ></u-input>
      </u-form-item>
      <u-form-item
          label="被告住址"
          prop="defendantAddress"
          borderBottom
          ref="item1"
          labelWidth="65"
      >
        <u-input
            v-model="form.defendantAddress"
            placeholder="请输入被告住址"
            border="none"
        ></u-input>
      </u-form-item>
    </u-form>
    <u-action-sheet
        :show="showDefendantSex"
        :actions="actions"
        title="请选择被告性别"
        @close="showDefendantSex = false"
        @select="sexSelectDefendant"
    >
    </u-action-sheet>
  </view>
</template>

<script>
export default {
  name: "defendantInfo",
  props:{
    form: {
      type: Object,
      default: function () {
        return {
          defendantName: '',
          defendantSex: '',
          defendantAge: '',
          defendantPhone: '',
          defendantAddress: '',
          defendantId: '',
          defendantIdType: '',
          defendantIdAddre: '',
        }
      }
    }
  },
  watch: {
    newForm(val, oldVal){
      this.$emit('updateForm', val)
    },
    form(){
      this.newForm = this.form;
    },
  },
  mounted() {
    this.newForm = this.form;
  },

  data() {
    return {
      showDefendantSex: false,
      newForm:{},
      actions: [{
        name: '男',
      },
        {
          name: '女',
        },
      ],
    }
  },
  methods: {
    sexSelectDefendant(e) {
      this.form.defendantSex = e.name;
      this.showDefendantSex = false;
    },
  },
}
</script>

<style scoped>

</style>